{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        {% block title %}{% endblock title %}Just Notes
    </title>

    <script src="{% static 'js/alpine.min.js' %}" defer></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Exo+2&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/tailwind/main.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/custom/custom.css' %}">
    <link rel="shortcut icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
    <!-- <link rel="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}">
    <link rel="icon" type="image/png" sizes="32x32" href="{% static 'favicon-32x32.png' %}">
    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'favicon-16x16.png' %}"> -->
    <!-- <link rel="manifest" href="{% static 'site.webmanifest' %}"> -->
    {% block additional_head_links %}{% endblock additional_head_links %}
    {% block additional_css %}{% endblock additional_css %}
</head>
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' class="bg-[--background] text-[--text]"
    x-data="{showMenu: false, darkTheme: false}"
    x-init="showMenu = window.innerWidth > 768; darkTheme = localStorage.getItem('theme') == 'theme-dark' ? true : false;"
    x-on:resize.window="window.innerWidth > 768 ? showMenu = true : showMenu = false"
    >
    <header class="" id="header">
        <nav class="flex justify-between p-3 rounded-lg bg-[--background-secondary] z-20 my-4 top-4 mx-[5vw]">
            <div class="flex flex-wrap justify-between w-full">
                <a href="{% url 'home_view' %}" class="hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer text-[--accent] self-center flex items-center">
                    <img src="{% static 'note_logo.png' %}" alt="" class="h-10 mr-3">
                    <h1 class="font-bold text-[min(10vw,30px)]">Just Notes</h1>
                </a>
                <div class="flex md:hidden md:order-2">
                    <button type="button" 
                        x-on:click="showMenu = !showMenu"
                        class="inline-flex items-center p-4 justify-center text-sm md:hidden focus:outline-none rounded-lg bg-[--secondary] hover:bg-[--secondary-dark] hover:cursor-pointer hover:text-[--accent]" aria-controls="navbar-sticky" aria-expanded="false">
                        <span class="sr-only">Open main menu</span>
                        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
                        </svg>
                    </button>
                </div>
                <div x-cloak x-show="showMenu" x-transition class="justify-between w-full md:flex md:w-auto md:order-1" id="navbar-sticky">
                    <ul class="flex flex-col mt-4 font-medium rounded-lg md:flex-row space-y-2 md:space-y-0 md:space-x-4 md:mt-0">
                        {% if user.is_authenticated %}
                            {% if user.is_superuser %}
                            <a href="/admin" class="p-2 md:p-4 text-center rounded-lg bg-[--secondary] hover:bg-[--secondary-dark] hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer">
                                <li class="">
                                    <span class="flex max-md:justify-center">
                                        Admin Panel
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 ml-2">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" />
                                        </svg>
                                    </span>                                
                                </li>
                            </a>
                            {% endif %}
                            <a href="{% url 'home_view' %}" class="p-2 md:p-4 rounded-lg bg-[--secondary] hover:bg-[--secondary-dark] hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer">
                                <li class="">
                                    <span class="flex max-md:justify-center">
                                        Home
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 ml-2">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                                        </svg>                                          
                                    </span>
                                </li>
                            </a>
                            <a href="{% url 'analytics_home_view' %}" class="p-2 md:p-4 rounded-lg bg-[--secondary] hover:bg-[--secondary-dark] hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer">
                                <li class="">
                                    <span class="flex max-md:justify-center">
                                        <p class="md:hidden lg:block" id="userNameNavBtnP">
                                            Analytics
                                        </p>
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 ml-2 md:ml-0 lg:ml-2">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
                                        </svg>                                                                                   
                                    </span>
                                </li>
                            </a>
                            <a href="{% url 'profile_view' %}" class="p-2 md:p-4 rounded-lg bg-[--secondary] hover:bg-[--secondary-dark] hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer">
                                <li class="">
                                    <span class="flex max-md:justify-center">
                                        <p class="md:hidden lg:block" id="userNameNavBtnP">
                                            {{ user.get_full_name }}
                                        </p>
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 ml-2 md:ml-0 lg:ml-2">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
                                        </svg>
                                    </span>
                                </li>
                            </a>
                            <a href="{% url 'logout_view' %}" class="p-2 md:p-4 rounded-lg bg-[--secondary] hover:bg-[--secondary-dark] hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer">
                                <li class="">
                                    <span class="flex max-md:justify-center">
                                        <p class="md:hidden lg:block">
                                            Log Out
                                        </p>
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 ml-2 md:ml-0 lg:ml-2">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
                                        </svg>                                 
                                    </span>    
                                </li>
                            </a>
                        {% else %}
                            <a href="{% url 'login_view' %}" class="p-2 md:p-4 rounded-lg bg-[--secondary] hover:bg-[--secondary-dark] hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer">
                                <li class="">
                                    <span class="flex max-md:justify-center">
                                        Log In
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 ml-2">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
                                        </svg>                              
                                    </span>
                                </li>
                            </a>
                            <a href="{% url 'register_view' %}" class="p-2 md:p-4 rounded-lg bg-[--secondary] hover:bg-[--secondary-dark] hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer">
                                <li class="">
                                    <span class="flex max-md:justify-center">
                                        Register
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 ml-2">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
                                        </svg>                              
                                    </span>
                                </li>
                            </a>
                        {% endif %}
                        <li 
                            x-on:click="
                                toggleTheme();
                                darkTheme=!darkTheme;
                            " 
                            x-transition 
                            class="p-2 md:p-4 rounded-lg bg-[--secondary] hover:bg-[--secondary-dark] hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer">
                            <a class=""
                                >
                                <span class="flex max-md:justify-center" id="theme-switcher-span">
                                    
                                </span>                          
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <main class="lg:px-[5vw] px-2 mt-5 min-h-[80vh]">
        {% block content %}
        {% endblock content %}
    </main>
    <footer class="px-[3vw] text-sm text-[--text-minor] w-full pt-10 pb-5">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-2 items-center">
            <span class="grid justify-center grid-flow-col gap-1">
                Design/Development: 
                <a target="_blank" class="text-[--accent]" href="https://oleksandrdev.com">oleksandrdev.com</a>
            </span>
            <span class="grid grid-flow-col justify-center gap-1">
                Github Repo: 
                <a target="_blank" class="text-[--accent]" href="https://github.com/olksndrdevhub/just-notes-htmx">just-notes-htmx</a>
            </span>
            <span class="grid justify-center">
                Copyright © 2023
            </span>
        </div>
    </footer>
    {% include "toasts.html" %}
    <script src="{% static 'js/htmx.min.js' %}"></script>
    <script>
        htmx.config.useTemplateFragments = true;
    </script>
    <script src="{% static 'toasts.js' %}"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.7.0/flowbite.min.js"></script> -->
    <script>
        document.addEventListener("DOMContentLoaded", function(event) { 
            //console.log(document.getElementsByClassName('toast'));
            //console.log(htmx.findAll(".toast:not([data-toast-template])"));
            htmx.findAll(".toast:not([data-toast-template])").forEach((element) => {
              window.setTimeout(function() {
                removeFadeOut(element, 1000)
              }, 5000)
            })
          });
 
        // THEME SWITCHING
        const lightThemeSvg = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" /></svg>'
        const darkThemeSwg = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" /></svg>'
        // function to set a given theme/color-scheme
        function setTheme(themeName) {
            localStorage.setItem('theme', themeName);
            document.documentElement.className = themeName;
            if (themeName === 'theme-dark') {
                document.getElementById('theme-switcher-span').innerHTML = lightThemeSvg;
            } else {
                document.getElementById('theme-switcher-span').innerHTML = darkThemeSwg;
            }
        }
        // function to toggle between light and dark theme
        function toggleTheme() {
            if (localStorage.getItem('theme') === 'theme-dark'){
                setTheme('theme-light');
            } else {
                setTheme('theme-dark');
            }
        }
        // Immediately invoked function to set the theme on initial load
        (function () {
            if (localStorage.getItem('theme') === 'theme-dark') {
                setTheme('theme-dark');
            } else if (localStorage.getItem('theme') === 'theme-light') {
                setTheme('theme-light');
            } else {
                window.matchMedia('(prefers-color-scheme: dark)').matches ? setTheme('theme-dark') : setTheme('theme-light');
            }
        })();
        // watch for system theme changes
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
            event.matches ? setTheme('theme-dark') : setTheme('theme-light');
        });
        // END THEME SWITCHING
    </script>

    {% block additional_javascript %}{% endblock additional_javascript %}
</body>
</html>